<script setup lang="ts">
import { computed } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { useMemberStore } from '@/stores'
import { VerifyStatus } from '@/types/enum'

const memberStore = useMemberStore()
const userInfo = computed(() => {
  if (memberStore.profile?.doctor && memberStore.profile.doctor.photoFront) {
    memberStore.profile.avatarUrl = memberStore.profile.doctor.photoFront
  }
  return memberStore.profile
})

onLoad(() => {
  if (!userInfo.value) {
    uni.showToast({
      title: '请先登录！', icon: 'none'
    })
    setTimeout(() => {
      uni.navigateTo({
        url: '/pages/auth/login',
      })
    }, 1500)
    return
  }
})
onShow(() => {
  if (doctor.value && doctor.value.verifyStatus === VerifyStatus.notCommit) {
    uni.showModal({
      showCancel: false,
      title: '提示',
      content: '请提交详细的资料进行审核！',
      success: function(res) {
        if (res.confirm) {
          uni.navigateTo({
            url: '/pages/doctor/detail',
          })
        }
      },
    })
  }
})

function goVerify(id: number) {
  uni.navigateTo({
    url: '/pages/doctor/detail?id=' + id,
  })
}

function logout() {
  uni.showModal({
    title: '提示',
    content: '确认退出登录吗？', success: function(res) {
      if (res.confirm) {
        memberStore.clearProfile()
        uni.navigateTo({
          url: '/pages/auth/login',
        })
      }
    },
  })
}

const druggist = computed(() => {
  return userInfo.value?.druggist
})
const doctor = computed(() => {
  return userInfo.value?.doctor
})
const patient = computed(() => {
  return userInfo.value?.patient
})

const name = computed(() => {
  if (druggist.value) {
    return druggist.value.name
  } else if (doctor.value) {
    return doctor.value.name
  }
  return patient.value!.name
})
</script>

<template>
  <view class="my-userinfo-container" v-if="userInfo">
    <!-- 头像和昵称区域 -->
    <view class="top-box">
      <image :src="userInfo.avatarUrl" class="avatar"></image>
      <view class="nickname">{{ name }}</view>
    </view>

    <!-- 面板区域 -->
    <view class="panel-list">
      <!-- 第1个面板 -->
      <view class="panel" v-if="druggist">
        <view style="padding: 10px 0;" class="panel-body" v-if="druggist.verifyStatus === VerifyStatus.passed">
          <text style="color: #a3a2a2;padding: 5px">我的邀请码：</text>
          <text class="inviteCode">{{ druggist.myInviteCode }}</text>
        </view>
        <view style="padding: 10px 0;" class="panel-body" v-if="druggist.verifyStatus === VerifyStatus.notPassed">
          <view class="verify_status">
            审核未通过
          </view>
          <button size="mini" type="primary" @click.stop="goVerify(druggist.id)">去编辑资料重新提交审核</button>
        </view>
        <view style="padding: 10px 0;" class="panel-body" v-if="druggist.verifyStatus === VerifyStatus.verifying">
          <view class="verify_status">
            正在审核中
          </view>
        </view>
      </view>
      <view class="panel" v-if="doctor">
        <view style="padding: 10px 0;" class="panel-body" v-if="doctor.verifyStatus === VerifyStatus.passed">
          <text style="color: #a3a2a2;padding: 5px">我的邀请码：</text>
          <text class="inviteCode">{{ doctor.myInviteCode }}</text>
        </view>
        <view style="padding: 10px 0;" class="panel-body" v-if="doctor.verifyStatus === VerifyStatus.notPassed">
          <view class="verify_status">
            审核未通过
          </view>
          <button size="mini" type="primary" @click.stop="goVerify(doctor.id!)">去编辑资料重新提交审核</button>
        </view>
        <view style="padding: 10px 0;" class="panel-body" v-if="doctor.verifyStatus === VerifyStatus.verifying">
          <view class="verify_status">
            正在审核中
          </view>
        </view>
      </view>

      <!-- 第2个面板 -->
      <view class="panel">
        <view class="panel-title">
          我的信息
        </view>
        <view class="panel-body">
          <uni-table v-if="druggist" border stripe emptyText="暂无更多数据">
            <!-- 表头行 -->
            <uni-tr>
              <uni-th align="left" width="90">姓名</uni-th>
              <uni-th align="left">{{ druggist.name }}</uni-th>
            </uni-tr>
            <!-- 表格数据行 -->
            <!-- <uni-tr>
              <uni-td>姓名</uni-td>
              <uni-td>{{userinfo.name}}</uni-td>
            </uni-tr> -->
            <uni-tr>
              <uni-td>性别</uni-td>
              <uni-td>{{ druggist.sex === 1 ? '男' : '女' }}</uni-td>
            </uni-tr>
            <uni-tr>
              <uni-td>年龄</uni-td>
              <uni-td>{{ druggist.age }}</uni-td>
            </uni-tr>
            <uni-tr>
              <uni-td>职务</uni-td>
              <uni-td>{{ druggist.position }}</uni-td>
            </uni-tr>
          </uni-table>

          <uni-table v-if="doctor" border stripe emptyText="暂无更多数据">
            <!-- 表头行 -->
            <uni-tr>
              <uni-th align="left" width="90">姓名</uni-th>
              <uni-th align="left">{{ doctor.name }}</uni-th>
            </uni-tr>
            <!-- 表格数据行 -->
            <!-- <uni-tr>
              <uni-td>姓名</uni-td>
              <uni-td>{{userinfo.name}}</uni-td>
            </uni-tr> -->
            <uni-tr>
              <uni-td>性别</uni-td>
              <uni-td v-if="doctor.sex">{{ doctor.sex === 1 ? '男' : '女' }}</uni-td>
              <uni-td v-else></uni-td>
            </uni-tr>
            <uni-tr>
              <uni-td>年龄</uni-td>
              <uni-td>{{ doctor.age }}</uni-td>
            </uni-tr>
            <uni-tr>
              <uni-td>学位</uni-td>
              <uni-td>{{ doctor.degree }}</uni-td>
            </uni-tr>
            <uni-tr>
              <uni-td>职称</uni-td>
              <uni-td>{{ doctor.position }}</uni-td>
            </uni-tr>
            <uni-tr>
              <uni-td>科室</uni-td>
              <uni-td>{{ doctor.sectionOffice }}</uni-td>
            </uni-tr>
            <uni-tr>
              <uni-td>专长</uni-td>
              <uni-td>{{ doctor.specialty }}</uni-td>
            </uni-tr>
            <uni-tr>
              <uni-td>就职医院</uni-td>
              <uni-td>{{ doctor.hospital }}</uni-td>
            </uni-tr>
            <uni-tr>
              <uni-td>临床经验</uni-td>
              <uni-td>{{ doctor.clinicalExperience }}</uni-td>
            </uni-tr>
          </uni-table>

          <uni-table v-if="patient" border stripe emptyText="暂无更多数据">
            <!-- 表头行 -->
            <uni-tr>
              <uni-th align="left" width="90">姓名</uni-th>
              <uni-th align="left">{{ patient.name }}</uni-th>
            </uni-tr>
            <!-- 表格数据行 -->
            <!-- <uni-tr>
              <uni-td>姓名</uni-td>
              <uni-td>{{userinfo.name}}</uni-td>
            </uni-tr> -->
            <uni-tr>
              <uni-td>性别</uni-td>
              <uni-td>{{ patient.sex === 1 ? '男' : '女' }}</uni-td>
            </uni-tr>
            <uni-tr>
              <uni-td>年龄</uni-td>
              <uni-td>{{ patient.age }}</uni-td>
            </uni-tr>
          </uni-table>
        </view>
      </view>

      <!-- 第3个面板 -->
      <view class="panel">
        <!-- <view class="panel-list-item">
          <text>收货地址</text>
          <uni-icons type="arrowright" size="15"></uni-icons>
        </view>
        <view class="panel-list-item">
          <text>联系客服</text>
          <uni-icons type="arrowright" size="15"></uni-icons>
        </view> -->
        <view class="panel-list-item" @click="logout">
          <text>退出登录</text>
          <uni-icons type="arrow-right" size="15"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.my-userinfo-container {
  height: 100%;
  background-color: #F4F4F4;

  .top-box {
    height: 400rpx;
    background-color: $themeColor;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .avatar {
      background-color: #FFFFFF;
      width: 90px;
      height: 90px;
      border-radius: 45px;
      border: 2px solid #FFF;
      box-shadow: 0 1px 5px black;
    }

    .nickname {
      font-size: 16px;
      color: #FFF;
      font-weight: bold;
      margin-top: 10px;
    }
  }
}

.panel-list {
  padding: 0 10px;
  position: relative;
  top: -10px;

  .panel {
    background-color: white;
    border-radius: 3px;
    margin-bottom: 8px;

    .inviteCode {
      color: $themeColor;
      border: 1px solid #f4f4f4;
      padding: 5px
    }

    .verify_status {
      color: red;
    }

    button {
      padding: 0 5px !important;
      margin: 0px;
      margin-left: 15px;
    }

    .panel-title {
      line-height: 45px;
      padding-left: 10px;
      font-size: 15px;
      // border-bottom: 1px solid #F4F4F4;
    }

    .panel-body {
      display: flex;
      justify-content: center;

      .panel-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        padding: 10px 0;
        font-size: 13px;

        .icon {
          width: 35px;
          height: 35px;
        }
      }
    }
  }
}

.panel-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  padding: 0 10px;
  line-height: 45px;
}
</style>
